<template>
    <div class="app1">
      <div id="right">
      <el-text>已有账号，请直接<RouterLink to="/Login" style="color:pink">登录</RouterLink></el-text>
        <!-- <el-text >已有账号 <el-link href="#" style="color:pink">请登录</el-link></el-text> -->
      </div>
      <div id="left">
        <el-text class="leftUp" type="warning" style="font-size: 20px;color:orange">新用户注册</el-text>
        <br>
        <el-text class="leftDown" type="warning" style="font-size:16px;color:antiquewhite">USE REGISTER</el-text> 
      </div>
      <div class="center">
        <div class="divFrom">
        <label> 用户名
        <el-input v-model="username" style="width: 240px" placeholder="请输入账号" >用户名</el-input>
      </label>
      <br><br>
      <label> 密码
        <el-input v-model="password" style="width: 256px" type="password" placeholder="请输入密码"  show-password>密码</el-input>
      </label>
     <br><br>
      <label> Email
        <el-input v-model="email" style="width: 246.85px"  placeholder="请输入Email" >Email</el-input>
      </label>
     <br><br>
      <label> 姓名
        <el-input v-model="name" style="width: 256px" placeholder="请输入真实姓名" >姓名</el-input>
      </label>
     <br><br>
      <label> 手机号
        <el-input v-model="phone" style="width: 240px" placeholder="请输入新的手机号" >手机号</el-input>
      </label>
     <br><br>
      <label>性别
        <el-radio-group v-model="gender">
        <el-radio value="1">男</el-radio>
        <el-radio value="2">女</el-radio>
      </el-radio-group>
      </label>
      <br><br>
      <label> 出生日期
        <el-date-picker v-model="birth" type="date" placeholder="年/月/日" :default-value="new Date(2024, 11, 15)" />
      </label>
      <br><br>
      <label>验证码
        <el-input v-model="checkCode" style="width:100px"/><img class="imgCode" src="@/img/验证码.png"  style="width:140px"/>
      </label>
      <br>
      <el-button @click="Submit" class="tdSubmit" v-model="value2" colspan="2">注册</el-button>
      </div>
    </div>
  </div>
  </template>
  <script setup>
    import { ref } from 'vue'
    const username = ref('')
    const password = ref('')
    const email = ref('')
    const name = ref('')
    const phone = ref('')
    const gender = ref('')
    const birth = ref('')
    const checkCode = ref('')
    const value2 = ref('')
  function Submit() {
    if(username.value==""){
        alert("请输入用户名");
      }if(password.value==""){
        alert("请输入密码");
      }if(email.value==""){
        alert("请输入邮箱");
      }if(name.value==""){
        alert("请输入姓名");
      }if(phone.value==""){
        alert("请输入手机号");
      }
      if(gender.value==""){
        alert("请选择性别");
      }if(birth.value==""){
        alert("请选择出生日期");
      }if(checkCode.value==""){
        alert("请输入验证码");
      }else{
        alert("注册成功");
        console.log("🚀 ~ username:", username.value)
        console.log("🚀 ~ password:", password.value )
        console.log("🚀 ~ email:", email.value)
        console.log("🚀 ~ phone:", phone.value)
        console.log("🚀 ~ gender:", gender.value)
        console.log("🚀 ~ birth:", birth.value)
        console.log("🚀 ~ checkCode:", checkCode.value)
      }
  }
  </script>
  
  <style scoped>
  .app1{
    /* border: 1px solid red; */
    width: 900px;
    height: 500px;
    /* border: 8px solid #eee; */
    border: 8px solid rgb(220, 219, 217);
    /* 让div水平居中 */
    margin: auto;
    background-color: white;
  }
  #left{
    float: left;
    width: 25%;
    padding-top: 15px;
    padding-left: 15px;
    /* font-size: 20px; */
  }
  .center{
    float: left;
    padding-top: 5px;
    width: calc(100% - 25% - 25%);
  }
  #right{
    float: right;
    width: 25%;
    padding-top: 15px;
    padding-right: 15px;
  }
  .imgCode{
    height: 32px;
    /* 垂直居中 */
    vertical-align: middle;
    padding-top:10px
  }
  .tdSubmit{
    text-align: center;
    margin-left: 50px;
    width:100px;
    color:palevioletred;
  }
  </style>
  